<template>
    <!-- 我的订单 -->
    <div class="myOrder">
        <NavbarBreadcrumb>
            <template v-slot:bread>
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item>我的订单</el-breadcrumb-item>
                </el-breadcrumb>
            </template>
        </NavbarBreadcrumb>
        <div class="padding15All ffffff"
                        style="padding-bottom:80px;">
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick1">
                <el-tab-pane label="普通订单" name="first"> -->
                    <CostTabsMain type="common" @Listsearch="Listsearch"/>
                    <div style="height:20px;background-color: #F5F6F7;"></div>
                    <div 
                        class="orderListBox padding15top" 
                        v-for="(item,index) in list" 
                        :key="item.orderId"
                        >
                        <div class="listTop padding15All">
                            <el-descriptions :colon="false" :column="4">
                                <el-descriptions-item label="出证服务">{{item.serviceName}}</el-descriptions-item>
                                <!-- <el-descriptions-item label="订单金额:">3000.00元</el-descriptions-item> -->
                                <!-- <el-descriptions-item label="单价:">6元/份</el-descriptions-item> -->
                                <el-descriptions-item label="订单编号:">{{item.orderId}}</el-descriptions-item>
                                <!-- <el-descriptions-item label="合同编号:">OVC2023051250686</el-descriptions-item> -->
                                <el-descriptions-item label="下单时间:">{{item.insertTime}}</el-descriptions-item>
                                <!-- <el-descriptions-item label="" :contentStyle="{'justify-content': 'center','margin-top':'-10px'}">
                                    <i class="el-icon-info" style="color:#ff7217;"></i>
                                    <el-button type="text">待生效</el-button>
                                </el-descriptions-item> -->
                            </el-descriptions>
                            
                        </div>
                        <div class="tableMain">
                                <el-table
                                    ref="multipleTable"
                                    :data="[].concat(list[index])"
                                    tooltip-effect="dark"
                                    style="width: 100%;height:100%;"
                                    max-height="200">
                                    <el-table-column
                                        fixed
                                        prop="proNum"
                                        label="产品规格数量"
                                        width="">
                                    </el-table-column>

                                    <el-table-column
                                        prop="orderMoney"
                                        label="订单金额"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="price"
                                        label="单价"
                                        width="">
                                    </el-table-column>

                                    <!-- <el-table-column
                                        prop="b"
                                        label="有效时间"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="c"
                                        label="已使用量"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="d"
                                        label="当前余量"
                                        width="">
                                    </el-table-column> -->
                                    <el-table-column
                                        prop="e"
                                        label="付款状态"
                                        width="">
                                        <template slot-scope="scope">
                                            <p v-if="scope.row.orderState==0">待支付</p>
                                            <p v-if="scope.row.orderState==1">支付成功</p>
                                        </template>
                                    </el-table-column>
                                    <el-table-column
                                        fixed="right"
                                        prop="m"
                                        label="操作"
                                        width="320">
                                        <template slot-scope="scope">
                                            <!-- <el-button @click="handleClick(scope.row)" type="text" size="small">查看账单</el-button> -->
                                            <el-button v-if="scope.row.orderState==0" @click="gopay(scope.row)" type="text" size="small">在线支付</el-button>
                                            <el-button v-if="scope.row.orderState==1" @click="goPayInfo(scope.row)" type="text" size="small">再次购买</el-button>
                                            <el-button v-if="scope.row.orderState==1" type="text" size="small">我要开票</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                        </div>
                    </div>
                <!-- </el-tab-pane>
                <el-tab-pane label="其他订单" name="second">
                    <CostTabsMain type="else"/>
                    <div style="height:20px;background-color: #F5F6F7;"></div>
                    <div class="orderListBox padding15top">
                        <div class="listTop padding15All">
                            <el-descriptions :colon="false" :column="4">
                                <el-descriptions-item>电子签名活动套餐（企） 试用</el-descriptions-item>
                                <el-descriptions-item label="订单编号:">G202304211135283669</el-descriptions-item>
                                <el-descriptions-item label="下单时间:">2023-04-21 17:14:11</el-descriptions-item>
                                <el-descriptions-item label="" :contentStyle="{'justify-content': 'center'}">
                                    <i class="el-icon-circle-check" style="color:#05c705;"></i>
                                    <el-button type="text" style="color:#05c705;">生效中</el-button>
                                </el-descriptions-item>
                            </el-descriptions>
                            
                        </div>
                        <div class="tableMain">
                                <el-table
                                    ref="multipleTable"
                                    :data="tableData"
                                    tooltip-effect="dark"
                                    style="width: 100%;height:100%;"
                                    max-height="200"
                                    @selection-change="handleSelectionChange">
                                    <el-table-column
                                        fixed
                                        prop="a"
                                        label="订单数量"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="b"
                                        label="有效时间"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="c"
                                        label="已使用量"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="d"
                                        label="当前余量"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        prop="e"
                                        label="订单状态"
                                        width="">
                                    </el-table-column>
                                    <el-table-column
                                        fixed="right"
                                        prop="m"
                                        label="操作"
                                        width="320">
                                        <template slot-scope="scope">
                                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看账单</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                </el-tab-pane>
            </el-tabs> -->
        </div>
        <div class="fixedBtm flexbetween padding15All ffffff">
            <!-- <div class="btn">
                <el-button type="primary">合并开票</el-button>
                <el-button type="primary">确定合并开票</el-button>
                <el-button>取消</el-button>
            </div> -->
            <div class="limit">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="params.pageNo"
                    :page-size="params.pageSize"
                    layout="prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
import CostTabsMain from '../components/CostTabsMain.vue'
import NavbarBreadcrumb from '../components/NavbarBreadcrumb.vue'
import { signOrderList } from '@/api/cost'
export default {
    components: { NavbarBreadcrumb, CostTabsMain },
    data(){
        return{
            activeName:'first',

            list:[],
            total:0,
            emtypetxt: '',

            params: {
                orderState:'',//支付状态 0 待支付 1 已支付
                insertEndTime:'',// 结束时间
                insertStartTime:'',//开始时间
                // serviceName:'',// 服务名称
                pageNo: 1,
                pageSize: 10
            },

        }
    },
    mounted() {
        this.getSignOrderList()
    },
     methods: {
        // 查询
        Listsearch(e){
            this.params.orderState = e.orderState;//支付状态 0 待支付 1 已支付
            this.params.insertEndTime = e.insertEndTime;//结束时间
            this.params.insertStartTime = e.insertStartTime;//开始时间
            this.getSignOrderList()
        },
        getSignOrderList(){
            // this.emtypetxt = '加载中...';
            signOrderList(this.params).then(res => {
                this.list = res.result.records
                this.total = res.result.total
                // if (this.list.length == 0) {
                //     this.emtypetxt = '暂无数据'
                // }
            }).catch(err => {
                console.log("请求失败", err)
            })
        },
        handleClick(){
            this.$router.push({name:'lookAccount'},()=>{})
        },
        // 在线支付
        gopay(item){
            let userInfomsg=this.$store.state.user.userInfomsg
            this.$router.push({name:'pay',params:{
                total:item.orderMoney,
                num:item.proNum,
                id:item.serviceProductId,
                signPayType:userInfomsg.lastLoginType,// 0个人1企业
                enterpriseId:userInfomsg.lastLoginType==1?userInfomsg.lastLoginId:'',//企业id
                type:item.productType==2?0:1,// 下单类型 2 鸿签 6-在线公证7证据报告8上链签署9公证签署
            }},()=>{})
        },
        // 再次购买
        goPayInfo(item){
            let userInfomsg=this.$store.state.user.userInfomsg
            this.$router.push({name:'payInfo',params:{
                name:item.productType==2?item.serviceName+'（'+item.payNum+'份合同）':item.serviceName,
                num:item.proNum,
                money:item.price,// 价格
                timeliness:item.productType==2?365:item.timeliness,// 有效期
                id:item.serviceProductId,// 鸿签服务id
                signPayType:userInfomsg.lastLoginType,// 类型 0个人1企业
                enterpriseId:userInfomsg.lastLoginType==1?userInfomsg.lastLoginId:'',//企业id
                type:item.productType==2?0:1,// 下单类型 2 鸿签 6-在线公证7证据报告8上链签署9公证签署 // 类型0鸿签1增值
            }},()=>{})
        },


        handleSizeChange(val) {
            this.params.pagesize = val
            this.getSignOrderList()
        },
        handleCurrentChange(val) {
            this.params.pageNo = val
            this.getSignOrderList()
        },
    },

}
</script>

<style lang="scss">
.myOrder{
    .el-descriptions__body{
        background-color:#F5F6F7 ;
    }
    .el-descriptions :not(.is-bordered) .el-descriptions-item__cell{
        padding-bottom: 0;
    }
}
</style>

<style lang="scss" scoped>
.myOrder{
    background-color: #fff;
    height: 100%;
    .orderListBox{
        border: 1px solid #F5F6F7;
        padding-top: 0;
        margin-top: 15px;
    }
    .listTop{
        background-color: #F5F6F7;
        box-shadow: 0 0 6px 0 #dce0ef;
        margin-bottom: 20px;
    }
    .fixedBtm{
        z-index: 4;
        position: fixed;
        bottom: 0;
        right: 0;
        left: 11vw;
    }
}
</style>